/*
* @author:Cao Tongqin
* */

//全局变量
var recommend = 1 ;
var read = 0 ;
var score = 4 ;
var xmlhttp;
window.onload = function () {
    showStar(score,"star_") ;
    buttonChange() ;

    //判断浏览器类型创建xmlhttprequest对象
    if(window.XMLHttpRequest)
        //code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest() ;
    else
        //code for IE6,IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP") ;

//comment_data从服务器中读取
    $.ajax({
        url:"http://127.0.0.1:8080/",
        dataType:'json',
        type:'get',
        data: {
            test:'ajax'
        },
        success:function (data) {
            console.log(data) ;
        },

    });
    //评论的列表信息
    var comment_data = [{
        name:'朱月',
        discuss:'《真心半解》是一部有关爱情，却没有纠缠在爱情中的青春电影，正如电影中所言爱是自私又混乱的，但我们却仍旧应该勇敢地去面对它，因为在爱的过程中我们同样会成长为更好的自己。',
        star:4,
    },
        {
            name:'小马达',
            discuss: '真心半截真的太好看了吧，我太爱了',
            star:5,
        }];

   //小说的详细信息
    var novelInfomation = {
        bookId:1,
        bookName:"真心半解 The Halt of It",
        author:"黑眼圈",
        type:"言情/文学",
        description:"《真心半解》是一部有关爱情，却没有纠缠在爱情中的青春电影，正如电影中所言爱是自私又混乱的，但我们却仍旧应该勇敢地去面对它，因为在爱的过程中我们同样会成长为更好的自己。\n" +
            "一段美国校园内发生的三角爱恋是《真心半解》的主线，然而就是这样一个乍看庸俗的故事，却在导演伍思薇手上产生了关乎青春与成长的共鸣。对人物情感细腻的掌控，使电影将少男少女面对感情那种微妙朦胧的思绪呼之欲出，也正是在这样一段真挚淳朴的恋情中，电影完成了对自我与成长的解构。",
        publisher:"黑眼圈出版社",
        state:"完结",
        image:"",
        score:9.2,
    };

    //喜欢这本书的人还喜欢的表单
    var likeOhter = [
        {
            img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590035147384&di=da004b9feacd6eb888c43db4a6d86697&imgtype=0&src=http%3A%2F%2Ft8.baidu.com%2Fit%2Fu%3D1484500186%2C1503043093%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D853",
            name:"柏林苍穹下",
            type:"诗歌/文学理论",
            author:"[法]伊夫·博纳富瓦"
        }
    ] ;

    var starLevel = [
        {
            name:"5星",
            ratio:77.3,
        },
        {
            name:"4星",
            ratio: 21.2,
        },
        {
            name:"3星",
            ratio:0.8,
        },
        {
            name:"2星",
            ratio:0.0,
        },
        {
            name:"1星",
            ratio:0.8,
        }
    ];

    var vue = new Vue({
        el:'#main',
        data:{
            coms:comment_data,
            lother:likeOhter,
            novinf:novelInfomation,
            starls : starLevel,
        }
    }) ;
    //将评论的分数打印出来
    for (let i=0; i<comment_data.length; i++){
        let str = "star_" ;
        let temp = i+1;
        str += temp+"_" ;
        // console.log(comment_data[i].star,str) ;
        showStar(comment_data[i].star,str) ;
    }

    //将小说总评分的比例图渲染出来
    for (let i =0; i<starLevel.length; i++){
       let str = "starlevel_"+i ;
       showStarLevel(str,starLevel[i].ratio) ;
    }
} ;

/*判断button是否被点击*/
function buttonDown(e) {
    if (read!=0 || recommend!=0)
        return -1 ;
    if(e.id == "recommend")
        recommend = 1 ;
    else
        read = 1 ;
    buttonChange() ;
}

/*button被点击一次之后发生的变化*/
function buttonChange() {
    let dom = null ;
    if (recommend == 0)
        dom = window.document.getElementById("recommend") ;
    else
        dom = window.document.getElementById("read") ;
    dom.style.background = "#aaaaaa" ;
    dom.style.cursor = "none" ;
    console.log("button color changes!");
}

/*打星*/
function star_evaluate(e){
    if (score!=0)
        return -1 ;
    var num = Number(e.id.slice(5)) ;
    score = num ;
    showStar(score,"star_") ;
}

/*展示打星
* num:用户的打星
* str:需要展示打星的id*/
function showStar(num,str) {
    console.log("this step is ok") ;
    for (var i = num; i>0; i--){
        var prefix = str + i;
        console.log(prefix) ;
        var dom = window.document.getElementById(prefix) ;
        dom.src = "../star1.png" ;
    }
}

/*计算e节点到body顶部的距离*/
function heightTop(e) {
    //e为跳转到该位置的dom节点
    let bridge = e ;
    let root = document.body ;
    let height = 0 ;
    do {
        height += bridge.offsetTop ;
        bridge = bridge.offsetParent ;
    }while (bridge!=root)

    return height ;
}

/*跳转到评论区*/
function scrollToComments(e) {
    window.scrollTo({
        top:heightTop(window.document.getElementById("comments")),
        behavior:'smooth'
    })
    console.log("page scroll to comments") ;
}

/*统计textarea中的字数*/
function wordCount(e) {
    let dom = window.document.getElementById("word_count") ;
    dom.innerHTML = e.value.length ;
}

/*提交textarea中的短评*/
function submitComments() {
    console.log("提交短评") ;
    let dom = window.document.getElementById("textarea") ;
    console.log(dom.value) ;
    console.log("短评提交成功") ;
}

/*打星图片的设置id
* index:v-for的下标
* num:html页面传进来的数字*/
function nameId(index,num) {
    let temp = index+1 ;
    // console.log("star_"+temp+"_"+num) ;
    return "star_"+temp+"_"+num ;
}

/*设置星级比例的id
* str:html页面设置的id前缀
* index:v-for的index*/
function starId(str,index) {
    console.log(str,index) ;
    return str+index;
}

/*
* 将不同星级的比例长度进行渲染
* str:传入标签的id
* width:要设置的width数值*/
function showStarLevel(str,width) {
    let dom = window.document.getElementById(str);
    let temp = width + "px" ;
    dom.style.width = temp ;
}